<template>
  <div class="address container">
    <van-nav-bar left-arrow title="我的地址" @click-left="back()"></van-nav-bar>
    <!-- 地址列表 -->
    <scroller style="top:40px;margin-bottom:50px">
      <van-address-list
        v-model="$store.state.address.chosenAddressId"
        :list="addressList"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
      />
    </scroller>
    <!-- 动画插槽 -->
    <keep-alive>
      <RightAnimate>
        <router-view class="animated" />
      </RightAnimate>
    </keep-alive>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
// 编辑地址
import EditAddress from '@/pages/public/_Address/EditAddress.vue'
import RightAnimate from '@/components/Animate/RightAnimate.vue'
export default {
  name: 'YscShopAddress',

  data () {
    return {
      // 默认绑定的地址
      // chosenAddressId: 1,
      // 从哪来
      isFrom: null,
    };
  },
  computed: {
    ...mapState(['addressList']),
  },
  created () {
    // 获取地址
    this.getAddressList()
    // 获取默认被选中
    this.$store.commit('defaultId')
  },
  mounted () {
    // 编辑地址返回
    // this.$bus.$on('cartEdit', res => {
    //   console.log(res);
    //   this.isFrom = res
    // })
  },
  components: {
    RightAnimate,
    EditAddress
  },
  methods: {
    ...mapMutations(['getAddressList']),
    // 新增地址
    onAdd () {
      if (this.$store.state.CartOrder.isFrom) {
        this.$router.push('/OrderEditAddress')
      } else {
        // 显示地址
        this.$router.push('/editAddress')
      }
      // 新增地址 恢复默认
      this.$store.dispatch('actDefaultAddress', {
        name: '',
        tel: '',
        addressDetail: '',
        areaCode: '',
        postalCode: '',
        isDefault: '',
      });
    },
    // 编辑地址
    onEdit (item, index) {
      // 显示详情地址
      // 详细地址
      const addressDetail = item.address.split(' ');
      const newItem = {
        name: item.name,
        tel: item.tel,
        addressDetail: addressDetail[3],
        areaCode: item.areaCode,
        postalCode: item.postalCode,
        isDefault: item.isDefault,
      }
      this.$store.dispatch('actDefaultAddress', newItem);
      // 传递参数
      this.$router.push({
        path: '/editAddress',
        query: {
          id: this.$store.state.addressList[index].id,
          index: index
        },
      })

    },
    back () {
      this.$store.commit('setPath', false)
      this.$router.back()
      // 返回订单页面 刷新地址列表
      this.getAddressList()
    },
    // 选中默认地址
    onSelect (item, index) {
      // 存储最新的默认id
      this.$nextTick(() => {
        window.localStorage.setItem('setChosenAddressId', this.$store.state.address.chosenAddressId)
      })
      // 更改默认地址
      this.$nextTick(() => {
        const address = JSON.parse(window.localStorage.getItem('addressList'));
        address.forEach(v => v.isDefault = '');
        address[index].isDefault = true
        window.localStorage.setItem('addressList', JSON.stringify(address))
        // 
        this.getAddressList()
        // 传入默认收货人信息
        this.$store.commit('receiverInfo', {
          // 收货人加手机号
          namePhone: item.name + " " + item.tel,
          // 省市县 详细地址
          address: item.address,
        })
      })
    }
  },

};
</script>

<style lang="less" scoped>
.van-button--danger {
  background-color: #f96c2f;
}
.van-address-list__bottom {
  z-index: 1;
}
</style>